<template>
	<div style="border: 1px solid #ccc">
		<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
			:mode="mode" />
		<Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
			:mode="mode" @onCreated="handleCreated" />
		<div style="border-top: 1px solid red;">
			<input v-model="valueHtml" />
		</div>
	</div>
	
</template>
<script>
	import '@wangeditor/editor/dist/css/style.css' // 引入 css

	import {
		onBeforeUnmount,
		ref,
		shallowRef,
		onMounted
	} from 'vue'
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'

	export default {
		components: {
			Editor,
			Toolbar
		},
		setup() {
			// 编辑器实例，必须用 shallowRef
			const editorRef = shallowRef()

			// 内容 HTML
			const valueHtml = ref('<p>hello</p>')

			// 模拟 ajax 异步获取内容
			onMounted(() => {
				setTimeout(() => {
					valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
				}, 1500)
			})

			const toolbarConfig = {}
			const editorConfig = {
				MENU_CONF: {
					uploadImage: {
						// 自定义选择图片
						customBrowseAndUpload(insertFn) {
							uni.chooseImage({
								success: (chooseImageRes) => {
									const tempFilePaths = chooseImageRes.tempFilePaths;
									uni.uploadFile({
										url: 'https://api.quyukang.com/api/uploadImg', //仅为示例，非真实的接口地址
										filePath: tempFilePaths[0],
										name: 'file',
										formData: {
											type: 'common'
										},
										header: {
											"Content-Type": "multipart/form-data",
											Authorization: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1LTktbnVsbCIsImV4cCI6MzU0OTE5MTAwN30.xW-VIeAdbLOD7tkgbwAxz3GJRucxvZXAnFUhL6KIC84"
										},
										success: (uploadFileRes) => {
											console.log(uploadFileRes.data);

											// 最后插入图片
											// insertFn(url, alt, href);
										}
									});
								}
							});
						}
					}
				}
			}

			// 组件销毁时，也及时销毁编辑器
			onBeforeUnmount(() => {
				const editor = editorRef.value
				if (editor == null) return
				editor.destroy()
			})

			const handleCreated = (editor) => {
				editorRef.value = editor // 记录 editor 实例，重要！
			}

			return {
				editorRef,
				valueHtml,
				mode: 'default', // 或 'simple'
				toolbarConfig,
				editorConfig,
				handleCreated
			};
		}
	}
</script>

<style>
	.w-e-bar-item {
		border: res 1px solid;
	}

	.w-e-bar-item button {
		border: none;
		background-color: none;
	}
</style>
